<template>
    <div>
        <div>{{message}}</div>
        <p v-if="seen">现在我看到你了</p>
        <div style="text-align: left">
            <ul>
                <li v-for="item in this.todos" :key="item.text">
                    {{item.text}}
                </li>
            </ul>
        </div>
        <div id="app-5">
            <p>{{reverseMessageStr}}</p>
            <button v-on:click="reverseMessage">反转消息</button>
        </div>
        <hr/>
        <div id="app-6">
            <p>{{message}}</p>
            <input v-model="message"/>
        </div>
        <hr/>
        <div>
            <ol>
                <todo-item
                    v-for="item in this.groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"></todo-item>
            </ol>
        </div>
        <hr/>
        <span>Message:{{message}}</span>
        <br/>
        <span v-once>这个将不会改变：{{message}}</span>
        <hr/>
        <div v-html="rawHtml"></div>
        <hr/>
        <div v-bind="dynamicId"></div>
        <button v-bind="isButtonDisabled">Button</button>
        <div>{{number + 1}}</div>
        <div>{{ok ? 'yes' : 'no'}}</div>
        <div>{{message.split("").reverse().join("")}}</div>
        <div>
            <a v-bind:href="url">www.baidu.com</a>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
Vue.component("todo-item",{
    props:["todo"],
    template:"<li>{{todo.text}}</li>"
})
@Component({})
export default class IntroduceExample extends Vue {
    name = '';
    message = "页面加载于：" + new Date().toLocaleString();
    seen = true;
    todos = [{text:"学习JavaScript"},{text:"学习VUE"},{text:"整个牛项目"}]
    reverseMessageStr = "Hello Vue.js";
    reverseMessage(){
        this.reverseMessageStr = this.reverseMessageStr.split("").reverse().join("");
    }
    groceryList = [
        {
            id:0,
            text:"蔬菜"
        },
        {
            id:1,
            text:'奶酪'
        },
        {
            id:2,
            text:"水果"
        }
    ]
    rawHtml = "<h1>HelloWorld</h1>";
    dynamicId = "1";
    isButtonDisabled = false;
    number = 1;
    ok = false;
    url = "https://www.baidu.com";
}
</script>

<style scoped>

</style>
